<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>spriteJS学习</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    #stage {
      height: 100%;
    }

    #adaptive {
      width: 50%;
      padding-bottom: 50%;
      background: #000;
    }
  </style>
</head>

<body>
  <div id="stage"></div>
</body>
<script src="./js/spritejs.js"></script>
<script>
  const { Scene, Sprite, Gradient, Path, Polyline } = spritejs;
  const container = document.getElementById('stage');
  const scene = new Scene({
    container,
    width: 600,
    height: 360, 
  });
  const layer = scene.layer();

  const line = new Polyline({
    pos: [0, 0],
    points: [0, 0, 100, 100, 200, 0, 300, 100, 400, 0, 500, 100, 600, 0],
    // strokeColor: 'red',
    lineWidth: 1,
    smooth: true,
    close: true,
    fillColor: '#37c',
  });
  layer.append(line);

  line.addEventListener('mouseenter', (evt) => {
    line.transition(0.1)
      .attr({
        scale: 1.02,
        opacity: 0.8
      });
  });

  line.addEventListener('mouseleave', (evt) => {
    line.transition(0.1)
      .attr({
        scale: 1.0,
        opacity: 1
      });
  });

  // 渐变
  const gradient = new Gradient({
    vector: [0, 0, 150, 150],
    colors: [
      { offset: 0, color: 'red' },
      { offset: 1, color: 'green' },
    ],
  });

  // 定义一个盒子
  const box = new Sprite({
    anchor: [0, 0],
    size: [50, 300],
    pos: [10, 10],
    bgcolor: '#11516e',
    // borderWidth: 1,
    // borderRadius: 0,
    // borderLeft: '#11516e',
    // borderColor: gradient,
  });
  layer.append(box);

  box.addEventListener('mouseenter', (evt) => {
    box.transition(1)
      .attr({
        // scale: 1.02,
        opacity: 0.8
      });
  });

  box.addEventListener('mouseleave', (evt) => {
    box.transition(1)
      .attr({
        // scale: 1,
        opacity: 1
      });
  });

  box.addEventListener('click', (evt) => {
    box.transition(0.1)
      .attr({
        bgcolor: 'red',
      });
  });

  const box2 = new Sprite({
    anchor: [0, 0],
    size: [50, 300],
    pos: [490, 10],
    bgcolor: '#11516e',
    borderWidth: 1,
    borderRadius: 0,
    borderColor: gradient
  });
  layer.append(box2);

  const box3 = new Sprite({
    anchor: [0, 0],
    size: [428, 52],
    pos: [62, 10],
    bgcolor: '#11516e',
    // borderWidth: 1,
    // borderRadius: 0,
    // borderColor:gradient
  });
  layer.append(box3);



</script>

</html>